<template>
  <div class="bucket-container">
    <div class="bucket-navbar-container">
      <el-menu class="bucket-menu" :router="true" :default-active="index">
        <!-- <el-menu-item index="/record/upload">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">表格管理</span>
        </el-menu-item>
        <el-menu-item index="/record/modify">
          <i class="el-icon-edit"></i>
          <span slot="title">修改请求</span>
        </el-menu-item> -->
        <el-menu-item
          v-for="(item, index) in menusMap.record"
          :key="index"
          :index="item.path"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
        <el-menu-item index="/record/print">
          <i class="el-icon-printer"></i>
          <span slot="title">表格打印</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="bucket-main-container">
      <div class="bucket-main-header"></div>
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      index: '/record/modify'
    }
  },
  computed: {
    ...mapGetters(['menusMap'])
  },
  mounted() {
    this.index = this.$router.history.current.path
  }
}
</script>

<style>
.bucket-main-container {
  height: 100vh;
}
</style>
